<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">用户信息</li>
    <li>头像</li>
    <li>密码</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <form class="layui-form layui-form-pane" method="post" action="user_add_content.html" >
        <input type="hidden" name="id" value="{$user.id}">
        <div class="layui-form-item">
          <label class="layui-form-label">昵称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" autocomplete="off" class="layui-input" value="{$user.name}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">手机</label>
          <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" autocomplete="off" class="layui-input" value="{$user.phone}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <input type="text" name="e_mail" required  lay-verify="required" autocomplete="off" class="layui-input" value="{$user.e_mail}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" >
            <input type="radio" name="sex" value="2" title="女" >
            <input type="radio" name="sex" value="0" title="保密" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">     
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      <script> 
      layui.use('form', function(){
        var form = layui.form;  
        form.render();
        form.on('submit(*)', function(data){
          return post('保存成功','保存失败');
        });
        $('input[type=radio][name=sex][value={$user.sex}]').next().click();
      });
      </script>
    </div>
    <div class="layui-tab-item">
      <div class="jumbotron" style="width: 400px; height: 300px; padding-top: 20px; padding-bottom: 0;">
        <div style=" display: flex;  justify-content: center;">
          <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
        </div>          
        <div id="user_img" style="display: flex;  justify-content: center; ">
            {if condition="$user.head_img"}
                <img src="/uploads/{$user.head_img}" alt="" style="width: 220px; height: 220px;"> 
              {else/}
                <img src="/ADIMG/xcms.gif" alt="" style="width: 220px; height: 220px;">
            {/if}
        </div>         
      </div>
      <script type="text/javascript">      
        layui.use('upload', function(){
          var upload = layui.upload;
          var uploadInst = upload.render({
            elem: '#test1',
            accept: 'images',
            url: 'user_img.html',
            method: 'post',
            field: 'img',
            exts: 'jpg|png|gif',
            size: '2048',
            data: {'id':'{$user.id}'},
            done: function(res){
              console.log(res);
              if(res.state == 1){
                layer.msg('添加成功！');
                $('#user_img img').attr('src','/uploads/'+res.head_img);
              }else{
                layer.msg(res.err);
              }
            }
          });
        });
      </script>      
    </div>
    <div class="layui-tab-item">
      <form action="user_update_password.html" method="post" class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="{$user.id}">
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-block">
            <input type="password" name="password" required  lay-verify="required" autocomplete="off" class="layui-input" >
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input type="password" name="repassword" required  lay-verify="required" autocomplete="off" class="layui-input" >
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">     
            <input type="button" class="layui-btn" value="修改" onclick="post('修改成功','修改失败')"> 
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
 
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element');
</script>


